<template>
  <div class="setup">
    <div class="center">
      <div class="top">
        <span>
          <van-icon name="arrow-left" @click="goback()" />
        </span>
        <div class="tittle">设置</div>
      </div>
      <div class="gray"></div>
      <div class="tiger" v-if="istoken">
        <van-cell title="个人资料" is-link />
        <van-cell title="账号与安全" is-link />
      </div>
      <div class="gray"></div>
      <div class="tiger">
        <van-cell title="消息通知设置" is-link />
        <van-cell title="隐私管理" is-link />
        <van-cell title="通用" is-link />
      </div>
      <div class="gray"></div>

      <div class="tiger">
        <van-cell is-link label="字大看的清使用更简单">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">长辈版</span>
            <van-tag type="danger">新功能</van-tag>
          </template>
        </van-cell>
      </div>
      <div class="tiger">
        <van-cell title="清除缓存" is-link />
        <van-cell title="诊断网络" is-link />
      </div>
      <div class="gray"></div>
      <div class="tiger">
        <van-cell title="个人信息收集清单" is-link v-if="istoken" />
        <van-cell title="第三方信息数据共享" is-link />
        <van-cell title="关于我们" is-link />
        <van-cell title="热线电话" value="10100011" is-link />
      </div>
      <div class="gray"></div>
      <div class="tiger" v-if="istoken">
        <span class="quit" @click="quit()">退出登录</span>
      </div>
      <div class="gray last"></div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // 登录才会显示
      istoken: false
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  created() {
    if (localStorage.getItem("token")) {
      this.istoken = true;
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    quit() {
      Dialog.confirm({
        message: "确定退出登录吗？"
      })
        .then(() => {
          localStorage.removeItem("token");
          setTimeout(() => {
            this.$router.push("/login");
          }, 1000);
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.setup {
  width: 100%;
  overflow: hidden;
  .center {
    width: 95%;
    margin: auto;
    .top {
      width: 100%;
      height: 11.733vw;
      display: flex;
      line-height: 11.733vw;
      font-weight: bolder;
      .span {
        left: 2.667vw;
        font-size: 5.333vw;
      }
      .tittle {
        text-align: center;
        flex-grow: 1;
        margin: auto;
      }
    }
    .gray {
      background-color: #f0f0f0;
      width: 110%;
      height: 1.6vw;
      margin-left: -5%;
    }
    .last {
      height: 6.933vw;
    }
    .tiger {
      .quit {
        padding: 4vw 0;
        display: inline-block;
        margin-left: 37.333vw;
      }
      ::v-deep .van-cell {
        border-bottom: 0.267vw solid #f0f0f0;
        font-weight: 500;
        font-size: 4.267vw;
        padding: 2.133vw 4.267vw;
      }
      ::v-deep .van-tag {
        border-radius: 2.133vw;
      }
      .custom-title {
        margin-right: 1.067vw;
        vertical-align: middle;
      }
      .search-icon {
        font-size: 4.267vw;
        line-height: inherit;
      }
    }
  }
}
</style>